would be good to have same support for esbuild builder too, not only for webpack

would be good to have same support for esbuild builder too, not only for webpack

Agreed, I found what seems to be the correct place here https://github.com/angular/angular-cli/pull/28939/files#diff-c31d390b8683db112fcc30e2ee984d893bdce6bd8e6d7d70c43ecc410a626a3dR489
But I am unsure how to add it correctly for the application builder.

would be good to have same support for esbuild builder too, not only for webpack

The application build system supports custom postcss configuration via either a postcss.config.json or .postcssrc.json file. Note that this can lead to increased build times since postcss is otherwise unused in the application build system and is only enabled if tailwind and/or a postcss configuration file is present.

@clydin tailwind v4 is getting released next week, it is better have support from day 1

Can't wait to get this feature

If you are interested in updating to or trying out Tailwind v4, ensure the project is using the application build system (default for new projects) and please follow the instructions found in the Tailwind documentation: https://tailwindcss.com/docs/installation/framework-guides/angular

The largest change in Tailwind v4 is the extra speed from their new build system, which we can't fully appreciate with postcss mandated. I'd say it's essential this PR, or a following one, allows us to use tailwindcss without postcss

+1 bump

Bump! It's not possible to use Angular with Storybook and Tailwindcss v4 until we get this merged.

this part is the crucial one, if anyone else struggles with the same:

const tailwindPostCSSPackagePath = require.resolve('@tailwindcss/postcss', { paths: [root] });

Which angular version will we get that tailwindcss 4 supports @jkrems? Waiting for your reply

Sorry for the delay here! Few things as frustrating as having a PR linger without a clear signal. There were some misunderstandings around the details of the situation which led to a bit of a bystander effect. To sum things up:

• Tailwind v4 works with the application builder in both v19 and v20, using a custom postcss JSON config file.
• Storybook currently requires the use of the browser builder (webpack) for Angular components.
• We have landed feat(@angular-devkit/build-angular): partial custom postcss config support #30592 which backports support for plugins in a postcss config file to the browser builder. This should go out with the next minor version of v20, so 20.1.0.

At that point, the documented setup for the application builder will also work when using the browser builder. This should hopefully reduce the amount of conflicting instructions across the builders.

It's worth noting that in any case, this is all based on the postcss plugin for tailwind. If there's interest in an integration with Tailwind's lightning css flow (especially if it comes with concrete estimates or even data on the impact on an Angular app), that might be worth as a separate issue.

I'm closing this PR since I believe #30592 ensures that apps can make use of tailwind v4 even when they need the browser builder.